<template>
	<view class="content">
		<view>
			<text :class="{ 'active': isActive,'normal':!isActive }" id="tab1" class="tab" @click="aiModelClick">
				产品设计AI模型
			</text>
			<text v-show="false" :class="{ 'active': !isActive,'normal':isActive }" id="tab2" class="tab"
				@click="aiModelClick">
				通用AI模型
			</text>
		</view>
		<view id="tabContent1" v-show="isActive">
			<view class="labeltabContent">
				<view id="labelTab0" @click="labelTabClick" class="labelTab"
					:class="{'labelTabActive':labelTabIndex==0}"><text>文生图</text></view>
				<view id="labelTab1" @click="labelTabClick" class="labelTab"
					:class="{'labelTabActive':labelTabIndex==1}"><text>图生图</text></view>
				<!-- 	<view id="labelTab2" @click="labelTabClick" class="labelTab"
					:class="{'labelTabActive':labelTabIndex==2}"><text>实验功能</text></view> -->
			</view>
			<view v-show="labelTabIndex==0">

				<view v-show="true" class="marginTop labelTitle1 line width100">
					<div class="bigEmpty">*画面描述</div>
					<div class="textblue14" @click="codeCreate()">指令生成器</div>
				</view>

				<view class="marginTop labelTitle"> <text>正向词输入：</text></view>



				<view class="marginTop">

					<textarea class="inputContent" v-model="goodContent" maxlength="1000"
						placeholder="输入你想要AI生成的内容,支持中英文" />
					<view class="rightLabel">
						<text> {{goodContent.length}}/1000 |</text> <text>清除</text>
					</view>

				</view>

				<view v-show="true" class="marginTop labelTitle1 line width100">
					<div class="bigEmpty">高级功能</div>
					<switch style="transform:scale(0.7)" @change="changeHighFun1" :checked="highFun1"></switch>
				</view>

				<view v-show="highFun1" class="marginTop">
					<view class="line">
						<view>风格化: 1</view>
						<view class="marginLeft bigEmpty">
							<sliderBar :disabled="false" class="bigEmpty" max='100' min='1' @change='change4'>
							</sliderBar>
						</view>
						<view class="marginLeft">1000</view>
					</view>
					<view class="marginTop labelTitle"> <text>反向向词输入：</text></view>

					<view class="marginTop">
						<textarea class="inputContent" v-model="badContent" maxlength="1000"
							placeholder="输入你想要AI生成的内容,支持中英文" />
						<view class="rightLabel">
							<text> {{badContent.length}}/1000 |</text> <text>清除</text>
						</view>
					</view>
					<view class="marginTop labelTitle"> <text>seed值：</text></view>

					<view class="marginTop">
						<input class="inputContent" v-model="seed" />
					</view>
				</view>


			</view>

			<view v-show="labelTabIndex==1">
				<view class="marginTop labelTitle"> <text>上传图片：支持图片格式 JPG、PNG，Max:10MB</text></view>
				<view class="marginTop">
					<uni-file-picker fileMediatype="image" :image-styles="imageStyles" v-model="imageList" :limit="3"
						@select="selectFileFun($event)" @delete="pickerDelete($event)" :imageStyles="imageStyles"
						:auto-upload="false" />
				</view>

				<view class="marginTop labelTitle1 line" v-show="imageList.length>1">
					<view class="bigEmpty">高级功能</view>
					<switch style="transform:scale(0.7)" @change="changeHighFun" :checked="highFun"></switch>
				</view>
				<view class="line marginTop" v-show="imageList.length>1&&highFun">
					<view>1图生成权重：</view>
					<sliderBar :disabled="false" class="bigEmpty" max='100' min='1' @change='change1'></sliderBar>
				</view>
				<view class="line marginTop" v-show="imageList.length>1&&highFun">
					<view>2图生成权重：</view>
					<sliderBar :disabled="false" class="bigEmpty" max='100' min='1' @change='change2'></sliderBar>
				</view>
				<view class="line marginTop" v-show="imageList.length>2&&highFun">
					<view>3图生成权重：</view>
					<sliderBar :disabled="false" class="bigEmpty" max='100' min='1' @change='change3'></sliderBar>
				</view>

				<view v-show="false" class="marginTop labelTitle"> <text>正向词输入：</text></view>

				<view v-show="false" class="marginTop">

					<textarea class="inputContent" v-model="goodContent" maxlength="1000"
						placeholder="输入你想要AI生成的内容,支持中英文" />
					<view class="rightLabel">
						<text> {{goodContent.length}}/1000 |</text> <text>清除</text>
					</view>

				</view>
				<view class="marginTop labelTitle"> <text>反向向词输入：</text></view>

				<view class="marginTop">

					<textarea class="inputContent" v-model="badContent" maxlength="1000"
						placeholder="输入你不想要AI生成的内容,支持中英文" />
					<view class="rightLabel">
						<text> {{badContent.length}}/1000 |</text> <text>清除</text>
					</view>

				</view>

			</view>



			<view class="sizeLine textblue14 marginTop  ">
				<view class="size2 " :class="{'size1':sizeTab1Index==1}" @click="size1Change(1)">
					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==1" mode="aspectFit" class="imageSize" src="/static/wsize11.png">
						</image>
						<image v-show="sizeTab1Index!=1" mode="aspectFit" class="imageSize" src="/static/size11.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>1:1</text>
					</view>
				</view>
				<view class="size2 marginLeft" :class="{'size1':sizeTab1Index==2}" @click="size1Change(2)">
					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==2" mode="aspectFit" class="imageSize" src="/static/wsize12.png">
						</image>
						<image v-show="sizeTab1Index!=2" mode="aspectFit" class="imageSize" src="/static/size12.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>1:2</text>
					</view>
				</view>
				<view class="size2 marginLeft" :class="{'size1':sizeTab1Index==3}" @click="size1Change(3)">
					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==3" mode="aspectFit" class="imageSize" src="/static/wsize43.png">
						</image>
						<image v-show="sizeTab1Index!=3" mode="aspectFit" class="imageSize" src="/static/size43.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>4:3</text>
					</view>
				</view>

				<view class="size2 marginLeft" :class="{'size1':sizeTab1Index==4}" @click="size1Change(4)">

					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==4" mode="aspectFit" class="imageSize" src="/static/wsize34.png">
						</image>
						<image v-show="sizeTab1Index!=4" mode="aspectFit" class="imageSize" src="/static/size34.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>3:4</text>
					</view>
				</view>

				<view class="size2 marginLeft" :class="{'size1':sizeTab1Index==5}" @click="size1Change(5)">
					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==5" mode="aspectFit" class="imageSize" src="/static/wsize169.png">
						</image>
						<image v-show="sizeTab1Index!=5" mode="aspectFit" class="imageSize" src="/static/size169.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>16:9</text>
					</view>
				</view>

				<view class="size2 marginLeft" :class="{'size1':sizeTab1Index==6}" @click="size1Change(6)">
					<view class="sizeImageOut line">
						<image v-show="sizeTab1Index==6" mode="aspectFit" class="imageSize" src="/static/wsize916.png">
						</image>
						<image v-show="sizeTab1Index!=6" mode="aspectFit" class="imageSize" src="/static/size916.png">
						</image>
					</view>
					<view class="sizeText ">
						<text>9:16</text>
					</view>

				</view>
			</view>
			<view class="marginTop"> <text>*模型选择</text></view>
			<view>
				<view class="sizeLine marginTop textblue14">
					<view class="size4 padding line" :class="{'size3':moduleIndex==4}" @click="moduleChange(4)">
						<view class="height100 moduleMarginTop">
							<text>精彩</text>
						</view>
						<view style="width: 30%;">
							<image v-show="moduleIndex!=4" mode="widthFix" class="iconModule marginLeft"
								src="../../static/babstract4.png"></image>
							<image v-show="moduleIndex==4" mode="widthFix" class="iconModule marginLeft"
								src="../../static/abstract4.png"></image>
						</view>

					</view>
					<view class="size4 padding marginLeft line" :class="{'size3':moduleIndex==5}"
						@click="moduleChange(5)">
						<view class="height100 moduleMarginTop ">
							<text>细腻</text>
						</view>
						<view style="width: 30%;">
							<image v-show="moduleIndex!=5" mode="widthFix" class="iconModule marginLeft"
								src="../../static/babstract6.png"></image>
							<image v-show="moduleIndex==5" mode="widthFix" class="iconModule marginLeft"
								src="../../static/abstract6.png"></image>
						</view>
					</view>
					<view class="size4 padding marginLeft line" :class="{'size3':moduleIndex==6}"
						@click="moduleChange(6)">
						<view class="height100 moduleMarginTop">
							<text>动漫</text>
						</view>
						<view style="width: 30%;">
							<image v-show="moduleIndex!=6" mode="widthFix" class="iconModule marginLeft"
								src="../../static/babstract5.png"></image>
							<image v-show="moduleIndex==6" mode="widthFix" class="iconModule marginLeft"
								src="../../static/abstract5.png"></image>
						</view>
					</view>
				</view>
				<view v-show="labelTabIndex==0" class="sizeLine marginTop textblue14 ">
					<view class="size4 padding line" :class="{'size3':moduleIndex==7}" @click="moduleChange(7)">
						<view class="height100 moduleMarginTop">
							<text>创意</text>
						</view>
						<view style="width: 30%;">
							<image v-show="moduleIndex!=7" mode="widthFix" class="iconModule marginLeft"
								src="../../static/babstract7.png"></image>
							<image v-show="moduleIndex==7" mode="widthFix" class="iconModule marginLeft"
								src="../../static/abstract7.png"></image>
						</view>

					</view>
					<view class="size4 padding marginLeft line" :class="{'size3':moduleIndex==8}"
						@click="moduleChange(8)">
						<view class="height100 moduleMarginTop">
							<text>照片</text>
						</view>
						<view style="width: 30%;">
							<image v-show="moduleIndex!=8" mode="widthFix" class="iconModule marginLeft"
								src="../../static/babstract8.png"></image>
							<image v-show="moduleIndex==8" mode="widthFix" class="iconModule marginLeft"
								src="../../static/abstract8.png"></image>
						</view>

					</view>
					<view class="size5 padding marginLeft"> <text></text></view>
				</view>
			</view>
			<view>
			</view>
			<view class="marginTop">
				<text>风格选择</text>
			</view>

			<view v-for="(item,index) in styleArray" :key="index" class="sizeLine marginTop textblue14">
				<view v-if="item[0]" class="circleSize2" :class="{'circleSize1':styleIndex==1}" @click="styleChange(1)">
					<text>{{item[0].name}}</text>
				</view>
				<view v-if="item[1]" class="circleSize2 marginLeft" :class="{'circleSize1':styleIndex==2}"
					@click="styleChange(2)">
					<text>{{item[1].name}}</text>
				</view>
				<view v-else style="visibility: hidden;" class="circleSize2 marginLeft"
					:class="{'circleSize1':styleIndex==9}" @click="styleChange(9)">
					<text></text>
				</view>
				<view v-if="item[2]" class="circleSize2 marginLeft" :class="{'circleSize1':styleIndex==3}"
					@click="styleChange(3)">
					<text>{{item[2].name}}</text>
				</view>
				<view v-else style="visibility: hidden;" class="circleSize2 marginLeft"
					:class="{'circleSize1':styleIndex==9}" @click="styleChange(9)">
					<text></text>
				</view>
			</view>
			<!-- <view class="sizeLine marginTop textblue14">
				<view class="circleSize2" :class="{'circleSize1':styleIndex==4}" @click="styleChange(4)">
					<text>哑光颜</text>
				</view>
				<view class="circleSize2 marginLeft" :class="{'circleSize1':styleIndex==5}" @click="styleChange(5)">
					<text>X光片</text>
				</view>
				<view class="circleSize2 marginLeft"> <text>矢量设计海报</text></view>
			</view>

			<view class="sizeLine marginTop textblue14">
				<view class="circleSize2" :class="{'circleSize1':styleIndex==6}" @click="styleChange(6)">
					<text>极简线条画</text>
				</view>
				<view class="circleSize2 marginLeft" :class="{'circleSize1':styleIndex==7}" @click="styleChange(8)">
					<text>炭笔画</text>
				</view>
				<view style="visibility: hidden;" class="circleSize2 marginLeft" :class="{'circleSize1':styleIndex==9}"
					@click="styleChange(9)">
					<text>更多</text>
				</view>
			</view> -->

			<view class="marginTop"> <text>生成模式</text></view>

			<view>

			</view>

			<view class="column marginTop textblue14 ">
				<view class="modeSize2 padding" :class="{'modeSize1':productMode==1}" @click="modeChange(1)">
					<text>普通生成</text>
					<view class="bigEmpty"></view><text> 预计排队1-5分钟</text>
				</view>
				<view class="modeSize2  padding marginTop" :class="{'modeSize1':productMode==2}" @click="modeChange(2)">
					<text>快速生成</text>
					<image src="/static/informtion.png" class="smallIcon"></image>
					<view class="bigEmpty"></view>
					<text>预计1分钟 | 3积分/次</text>

				</view>

			</view>

			<view class="marginTop line">
				<image class="smallIcon" src="../../static/informtion.png"></image> <text> 使用设辑创作服务表示您已同意</text>
				<navigator url="/pages/CreateAgreement/CreateAgreement"><text class="textblue14">《设辑AI创作服务协议》</text>
				</navigator>
				<view class="bigEmpty"></view>
			</view>
			<button class="submit marginTop" @click="submit">立即生成</button>

			<view class="padding-large"></view>

		</view>
		<view id="tabContent2" v-show="!isActive">
			<view style="display: none;">

			</view>
		</view>

		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup dialog padding">

				<view class="centerGroup textBlack18">AI生成明细</view>

				<view class="centerGroup  marginTop">
					<view class="bigEmpty">生成消耗</view>
					<view>{{totalCoin}}积分</view>
				</view>
				<view class="centerGroup  marginTop">
					<view class="bigEmpty">加速消耗</view>
					<view>{{fastCoin}}积分</view>
				</view>

				<view class="centerGroup  marginTop">
					<view class="bigEmpty">合计</view>
					<view>{{fastCoin+totalCoin}}积分</view>
				</view>

				<view v-show="tryTime" class="centerGroup  bigMarginTop">
					<view class="bigEmpty">设辑AI体验卡消耗</view>
				</view>

				<view v-show="!tryTime" class="centerGroup  bigMarginTop">
					<view class="bigEmpty">权益卡消耗</view>
					<view></view>
				</view>
				<view v-show="!tryTime" class="centerGroup  marginTop">
					<view class="bigEmpty">当前可用：无限</view>
				</view>

				<view v-show="tryTime" class="centerGroup  marginTop">
					<view class="bigEmpty">当前可用：{{haveTryTime}}次</view>减{{tryTime}}次<view></view>
				</view>

				<view class="centerGroup marginTop">
					<view class="centerGroup canle textblack14" @click="canleDialog">取消</view>
					<view class="centerGroup ok marginLeft textwhite14" @click="okDialog">知道了</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import request from "/common/request.js"
	import sliderBar from "/component/sliderBar/sliderBar.vue"
	export default {
		components: {
			sliderBar
		},
		data() {
			return {
				enableUpdate: true,
				productMode: 1,
				highFun: false,
				highFun1: false,
				weight1: 1,
				weight2: 1,
				weight3: 1,
				styleNum: 1,
				pg: 10,
				badContent: "",
				seed: "",
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 4,
				goodContent: "",
				imageList: [],
				isActive: true,
				bigSizeCoin: 0,
				totalCoin: 0,
				labelTabIndex: 0,
				havePermissionTime: 0,
				usePermissionTime: 0,
				haveTryTime: 0,
				fastCoin: 0,
				tryTime: 0,
				styleArray: [

				],
				imageStyles: {
					width: 118,
					height: 82,
					border: {
						color: "#F0F0F0",
						width: 2,
						style: 'solid',
						radius: '14px'
					}
				},
				finishImg: [],
				showDialog: false,
				dialogTitle: ""
			}
		},
		onLoad: function(query) {
			var that = this;
			uni.$on('codeCreate', res => {
				console.log(res.data)
				that.goodContent = res.data
			})
			this.requstCategoryData()
		},
		onUnload: function() {
			console.log("onUnload")
			uni.$off('codeCreate')
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		methods: {
			requstCategoryData() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/category/all";
				request(url, "GET", {
						page: 0,
						type: 4,
						size: 100
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)

						var inList = [];
						for (var i = 0; i < res.data.length; i++) {
							var item = res.data[i]
							if (i % 3 == 0) {
								inList = [];
								inList.push(item);
								that.styleArray.push(inList)
							} else {
								inList.push(item)
							}
						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			modeChange(num) {
				this.productMode = num
			},
			changeHighFun(e) {
				this.highFun = e.detail.value;
				console.log(e.detail)
			},
			changeHighFun1(e) {
				this.highFun1 = e.detail.value;
				console.log(e.detail)
			},
			change1(num) {
				this.weight1 = num;
				console.log(num)
			},
			change2(num) {
				this.weight2 = num;
				console.log(num)
			},
			change3(num) {
				this.weight3 = num;
				console.log(num)
			},
			change4(num) {
				this.styleNum = num;
				console.log(num)
			},
			okDialog() {
				this.showDialog = false;
				if (this.enableUpdate) {
					this.enableUpdate = false;
					this.doSubmit()
				}

			},
			canleDialog() {
				this.showDialog = false;
			},

			size1Change(num) {
				this.sizeTab1Index = num;
			},
			styleChange(num) {
				this.styleIndex = num;
			},
			moduleChange(num) {
				this.moduleIndex = num;
			},
			size2Change(num) {
				this.sizeTab2Index = num;
			},
			selectFileFun(e) {
				e.tempFilePaths.map(item => {
					console.log("item:", item);
					this.imageList.push({
						name: 'imageList',
						url: item
					})
				})
			},
			pickerDelete(e) {
				this.imageList.map((item, i) => {
					if (item.uri == e.tempFilePath) {
						this.imageList.splice(i, 1)
					}
				})
			},
			uploadMsg(attachment) {

				if (!attachment && !this.goodContent) {
					this.enableUpdate = true;
					uni.showToast({
						title: "内容不能为空"
					})
					return
				}

				uni.showLoading({
					title: "上传资料中..."
				})
				var cmd = this.goodContent;
				const that = this
				const url = getApp().globalData.apiUrl + "/api/v1/job";
				var pictureWeight = "";
				if (that.imageList.length == 2) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					pictureWeight = "--iw " + value1 + " --iw " + value2;
				}
				if (that.imageList.length == 3) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					var value3 = 0.5 + ((1.5) / 100 * that.weight3)
					pictureWeight = "--iw " + value1 + " --iw " + value2 + " --iw " + value3;
				}
				request(url, "POST", {
						style: that.styleIndex,
						module: that.moduleIndex,
						width2height: that.sizeTab1Index,
						pictureWeight: pictureWeight,
						cmd: cmd,
						taskType: 1,
						badContent: that.badContent,
						state: 0,
						type: that.productMode,
						attachment: attachment,
						style: that.styleIndex,
						productMode: that.productMode,

					}, uni.getStorageSync("token"))
					.then(function(res) {


						that.enableUpdate = true;
						uni.hideLoading()

						console.log('返回正确回调', res)
						var size = "1:1";
						var sizeArray = [
							"1:1",
							"1:1",
							"1:2",
							"4:3",
							"3:4",
							"16:9",
							"9:16"
						]
						size = sizeArray[that.sizeTab1Index]
						var module = "精彩"
						var moduleArray = [
							"1:1",
							"1:1",
							"1:2",
							"1:2",
							"精彩",
							"细腻",
							"动漫",
							"创意",
							"照片"
						]
						module = moduleArray[that.moduleIndex]
						var style = "长焦镜头"
						var styleArray = [
							"长焦镜头",
							"长焦镜头",
							"手绘背景",
							"CG数字渲染",
							"哑光颜",
							"X光片",
							"矢量设计海报",
							"极简线条画",
							"炭笔画",
							"更多"
						]
						style = styleArray[that.styleIndex]
						var url1 =
							"/pages/CreatePictureResult/CreatePictureResult?id=" +
							res.data.id + '&goodContent=' + that.goodContent + '&moduleIndex=' +
							that.moduleIndex +
							'&styleIndex=' +
							that.styleIndex + "&sizeTab2Index=" +
							that.sizeTab2Index + "&sizeTab1Index=" + that.sizeTab1Index +
							"&createTime=" + res.data.createTime +
							"&size=" + size +
							"&style=" + style +
							"&badContent=" + that.badContent +
							"&module=" + module
						that.badContent = '';
						that.goodContent = ''
						that.imageList = [];
						that.finishImg = [];
						uni.navigateTo({
							url: url1
						})
					}, function(err) {
						that.enableUpdate = true;
						uni.hideLoading()
						console.log('返回错误回调', err)
					})
			},
			codeCreate() {
				uni.navigateTo({
					url: "/pages/CodeCreate/CodeCreate"
				})
			},

			finishUpload() {
				const that = this
				if (that.finishImg.length == that.imageList.length) {
					uni.hideLoading();
					var attachment = "";
					for (var i = 0; i < that.finishImg.length; i++) {
						if (i == 0) {
							attachment = that.finishImg[i];
						} else {
							attachment = attachment + " " + that.finishImg[i];
						}
					}
					that.uploadMsg(attachment)
				}
			},
			upload() {
				const that = this
				// if (that.imageList.length > 1)
				// 	for (var i = 0; i < that.imageList.length; i++) {
				// 		for (var k = i + 1; k < that.imageList.length; k++) {
				// 			var file1 = that.imageList[i];
				// 			var file2 = that.imageList[k];
				// 			if (file1 == file2) {
				// 				uni.showToast({
				// 					title: "不能支持上传一样图片"
				// 				})
								
				// 				return
				// 			}
				// 		}
				// 	}

				uni.showLoading({
					title: "上传图片中..."
				})

				if (that.imageList.length > 0) {


					var item = that.imageList[0];
					const url = getApp().globalData.apiUrl1 + "/api/v1/file/upload";
					console.log(item.url)
					uni.uploadFile({
						url: url,
						filePath: item.url,
						name: 'file',
						formData: {}, //其它上传参数
						// header: {
						// 	"token": uni.getStorageSync('Token')
						// },
						success: (res) => {
							console.log(res)
							const data = JSON.parse(res.data);
							that.finishImg[0] = data.data
							console.log(" picture upload size:" + that.imageList.length)
							that.finishUpload()
							if (that.imageList.length > 1) {
								console.log("2 picture upload")
								item = that.imageList[1];
								console.log(item.url)
								uni.uploadFile({
									url: url,
									filePath: item.url,
									name: 'file',
									formData: {}, //其它上传参数
									// header: {
									// 	"token": uni.getStorageSync('Token')
									// },
									success: (res) => {
										console.log(res)
										const data = JSON.parse(res.data);
										that.finishImg[1] = data.data
										that.finishUpload()
										if (that.imageList.length > 2) {

											item = that.imageList[2];

											console.log(item.url)
											uni.uploadFile({
												url: url,
												filePath: item.url,
												name: 'file',
												formData: {}, //其它上传参数
												// header: {
												// 	"token": uni.getStorageSync('Token')
												// },
												success: (res) => {
													console.log(res)
													const data = JSON.parse(res.data);
													that.finishImg[2] = data.data
													that.finishUpload()

												},
												fail: error => {
													that.enableUpdate = true;
													console.log(error);
													uni.showModal({
														title: '网络中断，上传失败',
														content: "请重试",
														showCancel: false
													});
													uni.hideLoading();
												},
												complete: () => {}
											});
										}

									},
									fail: error => {
										that.enableUpdate = true;
										uni.showModal({
											title: '网络中断，上传失败',
											content: "请重试",
											showCancel: false
										});
										uni.hideLoading();
									},
									complete: () => {}
								});
							}

						},
						fail: error => {
							that.enableUpdate = true;
							uni.showModal({
								title: '网络中断，上传失败',
								content: "请重试",
								showCancel: false
							});
							uni.hideLoading();
						},
						complete: () => {}
					});


				}
			},
			doSubmit() {
				if (this.labelTabIndex == 1) {
					if (this.imageList.length > 1) {
						this.upload();
					} else {
						uni.showToast({
							title: "请选择两张图片"
						})
					}
				} else if (this.labelTabIndex == 0) {
					this.uploadMsg("");
				}
			},

			submit() {


				if (this.labelTabIndex == 1) {
					if (this.imageList.length > 1) {

						// if (this.imageList.length == 1 && !this.goodContent) {
						// 	uni.showToast({
						// 		title: "请填写ai生成内容"
						// 	})
						// 	return
						// }
						//this.upload();
					} else {
						uni.showToast({
							title: "请选择两张图片"
						})
						return;
					}
				} else if (this.labelTabIndex == 0) {
					if (!this.goodContent) {
						uni.showToast({
							title: "请填写ai生成内容"
						})
						return
					}
				}
				const url = getApp().globalData.apiUrl + "/api/v1/job/payInfo";
				const that = this;
				request(url, "GET", {
						style: that.styleIndex,
						module: that.moduleIndex,
						width2height: that.sizeTab1Index,
						sizeIndex: that.sizeTab1Index,
						state: 0,
						type: that.productMode,
						productMode: that.productMode,
						style: that.styleIndex,
						module: that.moduleIndex,
						width2height: that.sizeTab1Index
					}, uni.getStorageSync("token"))
					.then(function(res) {

						var coin = res.data.coin;
						var fastCoin = res.data.fastCoin;
						that.usePermissionTime = res.data.permissionTime;
						that.havePermissionTime = res.data.user.vipNum;
						that.haveTryTime = res.data.user.vipNum0;
						that.tryTime = res.data.tryTime;
						that.fastCoin = fastCoin;
						if ((res.data.user.coin >= coin + fastCoin) && res.data.todayTime > 0) {
							that.totalCoin = coin;
							that.showDialog = true;
						} else {

							console.log(res.data.user.level)

							if (0) {
								console.log(res.data.user.level)


								uni.showModal({
									title: "您的每日AI 生成体验次数已使用完请前往开通权益卡",
									confirmText: "去开通",
									cancelText: "我知道",
									success: function() {
										uni.navigateTo({
											url: "/pages/Coin/Coin?openType=1"
										})
									}
								})


							} else

							if (res.data.todayTime > 0) {
								uni.showModal({
									title: "你的积分不足",
									confirmText: "去充值",
									success: function() {
										uni.navigateTo({
											url: "/pages/Charge/Charge"
										})
									}
								})
							} else {
								uni.showModal({
									title: "您的每日AI 生成体验次数 已使用完请前往开通权益卡",
									confirmText: "去开通",
									cancelText: "我知道",
									success: function() {
										uni.navigateTo({
											url: "/pages/Coin/Coin?openType=1"
										})
									}
								})
							}


						}
						console.log('返回正确回调', res)

					}, function(err) {
						console.log('返回错误回调', err)
					})



			},
			aiModelClick(event) {
				console.log(event.currentTarget);
				if (event.currentTarget.id == 'tab1') {
					this.isActive = true;
				}
				if (event.currentTarget.id == 'tab2') {
					this.isActive = false;
				}
			},
			labelTabClick(event) {

				if (event.currentTarget.id == 'labelTab0') {
					this.labelTabIndex = 0;
				}
				if (event.currentTarget.id == 'labelTab1') {
					this.labelTabIndex = 1;
				}
				if (event.currentTarget.id == 'labelTab2') {
					this.labelTabIndex = 2;

				}
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";

	.iconModule {
		width: 100%;
		max-height: 160upx;
	}

	.moduleMarginTop {
		margin-top: 4vw;
	}

	.canle {
		width: 136.87px;
		height: 40.32px;
		border-radius: 100px;
		opacity: 1;
		background: #D8D8D8;
	}

	.ok {
		width: 136.87px;
		height: 40.32px;
		border-radius: 100px;
		opacity: 1;
		background: #0033FF
	}


	.dialog {

		width: 80%;

	}

	.dialogBg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.centerGroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.itemGroup {
		border-radius: 15px;
		background-color: #ffffff;
	}

	.sizeLine {
		width: 100%;
		display: flex;
		flex-direction: row;

	}

	.none {
		display: none;
	}

	.visible {
		display: block !important;
	}

	.smallIcon {
		height: 20rpx;
		width: 20rpx;
	}

	.size1 {
		width: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		border-radius: 10px;
		opacity: 1;
		height: 200upx;
		background: linear-gradient(142deg, rgba(203, 30, 155, 0.60) 14%, rgba(7, 154, 187, 0.60) 101%), rgba(241, 241, 241, 0.1) !important;
		box-sizing: border-box;
		border: 2px solid #0033FF !important;
		color: #FFFFFF !important;

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4) !important;
	}

	.size2 {
		width: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		border-radius: 10rpx;
		opacity: 1;
		height: 25vw;
		/* Pink-Blue/GlassLight */
		background: linear-gradient(142deg, rgba(254, 130, 219, 0.20) 14%, rgba(104, 228, 255, 0.20) 101%), rgba(241, 241, 241, 0.1);

		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.50) 3%, rgba(127, 214, 250, 0.50) 100%);

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
	}

	.size3 {
		width: 0px;

		color: #FFFFFF !important;
		flex-grow: 1;
		border-radius: 10px;
		opacity: 1;
		height: 400upx;
		background: linear-gradient(142deg, rgba(203, 30, 155, 0.60) 14%, rgba(7, 154, 187, 0.60) 101%), rgba(241, 241, 241, 0.1) !important;

		box-sizing: border-box;
		border: 2px solid #0033FF !important;

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4) !important;
	}

	.size4 {
		width: 0px;

		flex-grow: 1;
		border-radius: 10px;
		opacity: 1;
		height: 15vw;
		/* Pink-Blue/GlassLight */
		background: linear-gradient(142deg, rgba(254, 130, 219, 0.20) 14%, rgba(104, 228, 255, 0.20) 101%), rgba(241, 241, 241, 0.1);

		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.50) 3%, rgba(127, 214, 250, 0.50) 100%);

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
	}

	.size5 {
		width: 0px;

		flex-grow: 1;

	}

	.sizeText {
		height: 0%;
		flex: 1;
	}

	.sizeImageOut {

		width: 100%;
		height: 0;
		flex: 3;
	}


	.circleSize1 {
		width: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		height: 39.66px;
		border-radius: 100px;
		opacity: 1;
		color: #FFFFFF;

		background: linear-gradient(100deg, rgba(203, 30, 155, 0.60) 4%, rgba(7, 154, 187, 0.60) 104%), rgba(241, 241, 241, 0.1) !important;

		box-sizing: border-box;
		border: 2px solid #0033FF !important;

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4) !important;
	}

	.circleSize2 {
		width: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		height: 39.66px;
		border-radius: 100px;
		opacity: 1;

		/* Pink-Blue/GlassLight */
		background: linear-gradient(100deg, rgba(254, 130, 219, 0.20) 4%, rgba(104, 228, 255, 0.20) 104%), rgba(241, 241, 241, 0.1);

		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.50) 3%, rgba(127, 214, 250, 0.50) 100%);

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
	}

	.modeSize1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: center; */
		height: 80rpx;
		border-radius: 15rpx;
		background: linear-gradient(100deg, rgba(203, 30, 155, 0.60) 4%, rgba(7, 154, 187, 0.60) 104%), rgba(241, 241, 241, 0.1) !important;

		box-sizing: border-box;
		border: 2px solid #0033FF !important;

		color: white !important;

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4) !important;
	}


	.modeSize2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: center; */
		height: 80rpx;
		border-radius: 15rpx;

		/* Pink-Blue/GlassLight */
		background: linear-gradient(100deg, rgba(254, 130, 219, 0.20) 4%, rgba(104, 228, 255, 0.20) 104%), rgba(241, 241, 241, 0.1);

		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.50) 3%, rgba(127, 214, 250, 0.50) 100%);

		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
	}

	.imageSize {
		width: 50%;
		height: 50%;
	}

	.content {
		margin: 15px;
	}

	.tab {
		padding-right: 15px;

		opacity: 1;
		font-family: Source Han Sans CN;
		font-size: 36rpx;

		text-align: center;
		letter-spacing: 0px;
	}

	.tab.normal {
		color: #666666;
		font-weight: 500;
	}

	.tab.active {
		font-weight: 900;
		color: #000000;
	}

	.labeltabContent {
		margin-top: 15px;
		display: flex;
		flex-direction: row;
	}

	.labelTab {
		margin-right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: 175;

		letter-spacing: 0px;
		color: #000000;
		width: 160rpx;
		height: 45rpx;
		border-radius: 100px;
		opacity: 1;
		background: #E4E4E4;
	}

	.labelTabActive {
		color: #FFFFFF;
		background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.98) 0%, rgba(110, 24, 255, 0.99) 43%, #D000FF 83%);
	}

	.labelTitle {
		/* 上传图片：支持图片格式 JPG、PNG，Max:10MB */


		font-size: 24rpx;
		font-weight: 500;
		line-height: 20px;
		letter-spacing: 0px;
		color: #666666;
	}

	.rightLabel {
		position: relative;
		bottom: 30px;
		right: 30px;
		float: right;
	}

	.labelTitle1 {


		font-size: 32rpx;
		font-weight: 500;
		line-height: 20px;
		letter-spacing: 0px;
		color: #000000;
	}

	.inputContent {
		height: 200px;
		width: 100%;
		border-radius: 14rpx;
		opacity: 1;
		background: #F0F0F0;
		padding: 20px;
		box-sizing: border-box;
		border: 1px solid #C4BFBF
	}

	.submit {
		width: 100%;
		padding: 8rpx;
		text-align: center;
		border-radius: 100rpx;
		opacity: 1;
		background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.98) 0%, rgba(110, 24, 255, 0.99) 43%, #D000FF 83%);
		font-family: Source Han Sans CN;
		font-size: 36rpx;
		font-weight: bold;

		letter-spacing: 0px;
		color: #FFFFFF;
		text-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	}

	.marginTop {
		margin-top: 20rpx;
	}
</style>